<template>
  <div class="back-page order-list">
    <HeaderTop>
      <template #left>
        <van-icon
          name="arrow-left"
          @click="router.back()"
          size="20"
          style="transform: translateX(-0.3rem)"
        />
      </template>
      <template #center>
        <div class="fs-2 wd-75 center" style="color: white">订单列表</div>
      </template>
    </HeaderTop>
    <main class="list-container">
      <ul class="pb-15">
        <li class="mb-2" v-for="item in orderList" :key="item.id">
          <van-cell class="back-white" center >
            <template #title>
              <span
                @click="router.push({ name: 'OrderDetail', params: { orderId: item.id } })"
                class="fs-4 mr-2"
                >{{ item.restaurant_name }}</span
              >
            </template>
            <template #label>
              <span
                @click="router.push({ name: 'OrderDetail', params: { orderId: item.id } })"
                class="fs-6 mr-2"
                >{{ item.formatted_created_at }}</span
              >
            </template>
            <template #icon>
              <van-image
                class="mr-5 ml-2"
                :src="imgBaseUrl + item.restaurant_image_url"
                height="1rem"
                width="1rem"
                @click="router.push({ name: 'Shop', query: { id: item.restaurant_id } })"
              ></van-image>
            </template>
            <template #value>
              <span class="fs-5 text-2">{{ item.status_bar.title }}</span>
            </template>
          </van-cell>
          <van-cell
            class="back-white"
            center
            @click="router.push({ name: 'OrderDetail', params: { orderId: item.id } })"
          >
            <template #title>
              <span class="fs-5 mr-3 ml-15 text-2">{{ item.basket.group[0][0].name }}</span>
              <span class="fs-5 text-2">{{
                item.total_quantity === 1 ? "" : `等${item.total_quantity}件商品`
              }}</span>
            </template>
            <template #value>
              <span class="warning">￥{{ item.total_amount }}</span>
            </template>
          </van-cell>
          <van-cell class="back-white" center title="">
            <template #value>
              <van-tag
                v-if="item.status_bar.title === '支付超时'"
                type="primary"
                plain
                size="medium"
                @click="router.push({ name: 'Shop', query: { id: item.restaurant_id } })"
                >再来一单</van-tag
              >
              <van-tag v-else type="primary" plain size="medium">去支付</van-tag>
            </template>
          </van-cell>
        </li>
      </ul>
      <router-view v-slot="{ Component }">
        <transition name="detail-show">
          <component :is="Component" />
        </transition>
      </router-view>
    </main>

    <TabBar></TabBar>

  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { getOrderList } from "@/api";
import { user } from "@/store/index";
import { storeToRefs } from "pinia";
import { imgBaseUrl } from "dir/env.config";
import { OrderInfo_format } from "@/type/index";
const router = useRouter();
const { user_id } = storeToRefs(user());
const orderList = ref<OrderInfo_format[]>();
const initData = async () => {
  orderList.value = await getOrderList<OrderInfo_format[]>(user_id.value, 0);
  console.log(orderList.value);
};
//调用初始化函数
initData();
</script>

<style lang="scss" scoped>
@import "@/assets/scss/mixin.scss";
.order-list {
  position: absolute;
  left: 0;
  top: 0;
  @include wh(100%, 100%);
  overflow: hidden;
  .list-container{
    height: calc(100% - 1.2rem);
    overflow-y: auto;
  }
}
</style>
